<template>
  <div class="container">
    <div class="navLeft">
      <img src="../assets/images/logo-header.png" alt />
    </div>
    <ul class="ul">
      <li style="color:#00CF8C">首页</li>
      <a-dropdown>
        <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="float: left; color:black">
          课程分类 <a-icon type="down" />
        </a>

        <a-menu slot="overlay">
          <a-menu-item v-for="(item,index) in list" :key="index">
            <a href="javascript:;"> {{item.subjectTitle}}</a>
          </a-menu-item>
        </a-menu>

      </a-dropdown>
      <li>专属课程</li>
    </ul>
    <div class="navCenter">
      <input type="text" placeholder="搜索课程" />
      <button>
        <a-icon type="search" />搜索
      </button>
    </div>
    <div class="navRight" >
      <div class="shopcar" @click="open">
        <a-icon type="shopping-cart" class="icon" />
      </div>
      <div class="cell"></div>
      <div @click="personal">
<!--        开始-->
        <a-dropdown v-if="login"  >
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            <span  class="text">{{login.nickname}}</span>
          </a>
          <a-menu slot="overlay">
            <a-menu-item  >
              <a href="javascript:;">个人中心</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">我的课程</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">我的订单</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:; " @click="exit"> 退出登录</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
<!--        结束-->

        <span v-if="!login">登录/注册</span>
        <span class="user">
           <img :src="login.portrait" v-if="login" class="img111">
             <a-icon type="user" class="icon1" v-if="!login" />
            </span>
      </div>
    </div>
    <div v-if="flag">
      <login></login>
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  import {getList} from "../utils/getList";
  import login from "./login"
  import {exitLogin} from "../utils/exitLogin";

  export default {
    components:{
      login
    },
    computed: {
      // 可以写一些其他的计算属性
      ...mapState({
        // title: state => state.title
        // title: "title"
        login: state => {
          return state.login;
        }
      })
    },
    methods:{
      open(){
        if(!this.login){
          this.$store.commit("change",true)
        }else{
          console.log("让他进购物车页面")
          this.$store.commit(" loginStatus",true)
          this.$router.push("/shopcar")
        }
      },
      personal(){
        if(!this.login){
          this.$store.commit("change",true)
        }else{
          console.log("让他进个人页面")
        }
      },
      exit(){
        exitLogin().then(res=>{

          //退出登录成功
          if(res.data.code==0) {
            //清空用户信息
            this.$store.commit("login", null)
            //设置登录状态
            this.$store.commit("loginStatus", false)
            this.$router.push("/")
          }
        })

      }
    },
    data(){
      return {
        list:[],
        flag:true
      }
    },
    created() {
      getList().then((res)=>{
        this.list=res.data.rows
      })
    }
  };
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    justify-content: space-between;
    height: 106px;
    width: 78%;
    margin: 0 auto;

  }
  .ul{
    list-style: none;
    /*padding-left: 162px;*/
    font-size: 16px;
    margin-top: 37px;
  }
  .ul>li{
    float: left;
    margin: 0 15px
  }
 /deep/ .ant-carousel .slick-slide {
    text-align: center;
    height: 340px;
    line-height: 340px;
    background: #364d79;
    overflow: hidden;
  }

  /deep/ .ant-carousel .slick-slide h3 {
    color: #fff;
  }
  .navLeft img {
      height: 55px;
      margin-top: 22px;
    }

  .img111{
    height: 32px;
    width: 32px;
    border-radius: 50%;
  }
  /deep/.text{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    width: 80px;
    height: 16px;
    cursor: pointer;
   color: black;

  }
.dropdown{
  color: #00cf8c;

}


  .navCenter {
    width: 400px;
    display: table;
    /*margin-left: -160px;*/
    input {
      outline: none;
      border: 1px solid #ccc;
      margin-top: 30px;
      float: left;
      width: 316px;
      height: 38px;
      padding-left: 12px;
      border-radius: 20px 0 0 20px;
      border-collapse: separate;
      border-spacing: 0;
    }
    button {
      margin-top: 30px;
      height: 38px;
      width: 83px;
      // margin-left: -81px;
      margin-left: -1px;
      border-radius: 0px 20px 20px 0px;
      border: none;
      background-color: #00cf8c;
      color: #fff;
      outline: none;
    }
  }
  .navRight {
    height: 106px;
    width: 185px;
    margin-top: 30px;
    margin-right: 40px;
    div {
      float: left;
      font-size: 13px;
      .icon {
        font-size: 24px;
      }
      .icon1 {
        font-size: 14px;
        color: #fff;
      }
    }
    .cell {
      margin: 6px 10px;
      height: 18px;
      position: relative;
      top: -0.06em;
      display: inline-block;
      width: 1px;
      vertical-align: middle;
      background: #e8e8e8;
    }
  }
  .user{
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    display: inline-block;
    border-radius: 50%;
    background-color: #ccc;
    margin-left: 4px;
  }
 .shopcar{
    margin-top: 3px;
  }
</style>